<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
<meta charset="UTF-8">
<title>商品管理</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="format-detection" content="telephone=no">
	<link rel="icon" href="/resources/favicon.ico">
	<link rel="stylesheet" href="/resources/layui/css/layui.css" media="all" />
	<link rel="stylesheet" href="/resources/css/public.css" media="all" />
	<link rel="stylesheet" href="/resources/layui_ext/dtree/dtree.css">
    <link rel="stylesheet" href="/resources/layui_ext/dtree/font/dtreefont.css">
</head>
<body class="childrenBody">
	<blockquote class="layui-elem-quote quoteBox">
		<form class="layui-form" method="post" id="searchForm">
			<div class="layui-form-item" style="text-align: center;">
			    <div class="layui-inline">
			      <label class="layui-form-label">供应商:</label>
			      <div class="layui-input-inline">
			      	<select id="searchProvider" name="providerid">
			      		<option value="">请选择供应商</option>
			      	</select>
			      </div>
			    </div>
			    <div class="layui-inline">
			      <label class="layui-form-label">商品名称:</label>
			      <div class="layui-input-inline">
			        <input type="text" name="goodsname"  placeholder="请输入商品名称" autocomplete="off" class="layui-input">
			      </div>
			    </div>
			    <div class="layui-inline">
			      <label class="layui-form-label">生产批号:</label>
			      <div class="layui-input-inline">
			        <input type="text" name="productcode"  placeholder="请输入生产批号" autocomplete="off" class="layui-input">
			      </div>
			    </div>
		   </div>
		   <div class="layui-form-item" style="text-align: center;">
			    <div class="layui-inline">
			      <label class="layui-form-label">批准文号:</label>
			      <div class="layui-input-inline">
			      	<input type="text" name="promitcode" placeholder="请输入批准文号"   autocomplete="off" class="layui-input">
			      </div>
			    </div>
			    <div class="layui-inline">
			      <label class="layui-form-label">商品描述:</label>
			      <div class="layui-input-inline">
			        <input type="text" name="description"  placeholder="请输入商品描述" autocomplete="off" class="layui-input">
			      </div>
			    </div>
			    <div class="layui-inline">
			      <label class="layui-form-label">商品规格:</label>
			      <div class="layui-input-inline">
			        <input type="text" name="size"  placeholder="请输入商品规格" autocomplete="off" class="layui-input">
			      </div>
			    </div>
		   </div>
		   <div class="layui-form-item" style="text-align: center;">
			      <button type="button" class="layui-btn" id="doSearch"><span class='layui-icon'>&#xe615;</span>搜索</button>
		          <button type="reset" class="layui-btn layui-btn-danger"><span class='layui-icon'>&#xe669;</span>重置</button>
			</div>
		</form>
	</blockquote>
	
	<table id="goodsTable" class="layui-table" lay-filter="goodsTable"></table>
	
	<!--表头-->
	<div id="goodsTableToolBar" style="display: none;">
		<a class="layui-btn layui-btn-sm" lay-event="add"><span class="layui-icon">&#xe61f;</span>添加商品</a>
		<a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="batchdel"><span class="layui-icon">&#xe640;</span>批量删除</a>
	</div>
	<!--操作-->
	<div type="text/html" id="goodsTableRowBar"  style="display: none;">
		<a class="layui-btn layui-btn-xs" lay-event="update"><span class="layui-icon">&#xe642;</span>更新</a>
		<a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="del"><span class="layui-icon">&#xe640;</span>删除</a>
	</div>
	
	<!-- 修改和添加弹出层开始 -->
	<div style="display: none;padding: 3px" id="saveOrUpdateDiv">
		<form id="dataForm" lay-filter="dataForm" class="layui-form layui-form-pane">
			<div class="layui-col-md12 layui-col-xs12">
				<div class="layui-row layui-col-space10">
					<div class="layui-col-md9 layui-col-xs7">
						<div class="layui-form-item magt3">
							<label class="layui-form-label">供应商:</label>
						    <div class="layui-input-inline">
						    	<input type="hidden" name="id">
						    	<select id="providerid" name="providerid">
						    	</select>
						    </div>
						</div>
						<div class="layui-form-item">
			      			<label class="layui-form-label">商品名称:</label>
			    			<div class="layui-input-block">
			     				<input type="text" name="goodsname" lay-verify="required" placeholder="请输入商品名称" autocomplete="off" class="layui-input">
			   				</div>
						</div>
						<div class="layui-form-item">
			      			<label class="layui-form-label">商品描述:</label>
			    			<div class="layui-input-block">
			     				<input type="text" name="description"  placeholder="请输入商品描述" autocomplete="off" class="layui-input">
			   				</div>
						</div>
					</div>
					
					<div class="layui-col-md3 layui-col-xs5">
						<div class="layui-upload-list thumbBox mag0 magt3 ">
							<input type="hidden" name="goodsimg" id="goodsimg" value="/resources/images/defaultgoodsimg.png">
							<img class="layui-upload-img thumbImg" src="/file/showImage?filePath=/resources/images/defaultgoodsimg.png">
						</div>
					</div>
				</div>
				
				<div class="layui-form-item">
					<div class="layui-inline">
			      		<label class="layui-form-label">产地:</label>
			     		 <div class="layui-input-inline">
			      			<input type="text" name="produceplace" placeholder="请输入产地"   class="layui-input">
			     		 </div>
			    	</div>
				    <div class="layui-inline">
				     	 <label class="layui-form-label">包装:</label>
				     	 <div class="layui-input-inline">
				     	   <input type="text" name="goodspackage"  placeholder="请输入包装"  class="layui-input">
				     	 </div>
				    </div>
				    <div class="layui-inline">
				     	 <label class="layui-form-label">规格:</label>
				     	 <div class="layui-input-inline">
				     	   <input type="text" name="size"  placeholder="请输入规格"  class="layui-input">
				     	 </div>
				    </div>
				    <div class="layui-inline">
				      	<label class="layui-form-label">生产批号:</label>
				     	<div class="layui-input-inline">
				      		<input type="text" name="productcode"  placeholder="请输入生产批号" autocomplete="off" class="layui-input">
				    	</div>
				    </div>
				    <div class="layui-inline">
						<label class="layui-form-label">批准文号</label>
						<div class="layui-input-inline">
							<input type="text" class="layui-input" name="promitcode" placeholder="请输入批准文号">
						</div>
					</div>
					<div class="layui-inline">
						<label class="layui-form-label">销售价格</label>
						<div class="layui-input-inline">
							<input type="text" class="layui-input" name="price" placeholder="请输入销售价格">
						</div>
					</div>
					<div class="layui-inline">
						<label class="layui-form-label">库存量</label>
						<div class="layui-input-inline">
							<input type="text" class="layui-input" name="number" placeholder="请输入库存量">
						</div>
					</div>
					<div class="layui-inline">
						<label class="layui-form-label">预警值</label>
						<div class="layui-input-inline">
							<input type="text" class="layui-input" name="dangernum" placeholder="请输入预警值">
						</div>
					</div>
					<div class="layui-inline">
						<label class="layui-form-label">是否有效</label>
						<div class="layui-input-inline">
								<input type="radio" name="available" value="1" title="可用" checked="">
		     					<input type="radio" name="available" value="0" title="不可用">
						</div>
					</div>
				</div>
				<div class="layui-form-item" style="text-align: center;">
				    <button type="button" class="layui-btn" lay-filter="doSubmit" lay-submit=""><span class='layui-icon'>&#xe609;</span>提交</button>
			        <button type="reset" class="layui-btn layui-btn-danger"><span class='layui-icon'>&#xe669;</span>重置</button>
		   		</div>
			</div>
		</form>
	</div>
	<!-- 修改和添加弹出层结束 -->
	
	
	<script type="text/javascript" src="/resources/layui/layui.js"></script>
	<script type="text/javascript">
	var tableIns;
	var $;
	layui.use(['layer','jquery','table','form','upload'],function(){
		  var layer = layui.layer;
		  $ = layui.jquery;
		  var table = layui.table;
		  var form = layui.form;
		  var upload = layui.upload;
		  
		  //加载查询条件的供养商的下拉列表
		  $.post("/provider/loadAllAvailableProvider",function(data){
			  var searchProvider = $("#searchProvider");
			  var html = '<option value="">请选择供应商</option>';
			  $.each(data.data,function(i,item){
				  html+='<option value="'+item.id+'">'+item.providername+'</option>'
			  });
			  searchProvider.html(html); 
			  form.render();
		  });
		  

		//渲染数据表格
			tableIns = table.render({
				elem:'#goodsTable',
				url:'/goods/loadAllGoods',
				toolbar:'#goodsTableToolBar',//开启同工具栏
				defaultToolbar:['filter','print'],
				title: 'full-商品数据表',
				height:'full-220',//固定高度
				cols:[ [
					{type: 'checkbox', fixed: 'left'},
					{field:'id',title:'ID',align:'center',fixed: 'left',width:'80'},
					{field:'goodsname',title:'商品名称',align:'center',width:'150'},
					{field:'providername',title:'供应商',align:'center',width:'150'},
					{field:'produceplace',title:'产地',align:'center',width:'150'},
					{field:'number',title:'库存量',align:'center',width:'150'},
					{field:'dangernum',title:'预警值',align:'center',width:'150'},
					{field:'price',title:'价格',align:'center',width:'150'},
					{field:'size',title:'商品规格',align:'center',width:'150'},
					{field:'goodspackage',title:'包装',align:'center',width:'150'},
					{field:'productcode',title:'生产批号',align:'center',width:'150'},
					{field:'promitcode',title:'批准文号',align:'center',width:'150'},
					{field:'description',title:'商品描述',align:'center',width:'150'},
					{field:'goodsimg', title:'图片',align:'center',width:'120',templet:function(d){
				    	  return "<img width=30 height=30 src='/file/showImage?filePath="+d.goodsimg+"'/>";
				    }},
					{field:'available',title:'是否可用',align:'center',width:'150',templet: function(d){
						 return d.available==1?'<font color=blue>可用</font>':'<font color=red>不可用</font>';
					}},
					{fixed: 'right', title:'操作', toolbar: '#goodsTableRowBar',align:'center',width:'200'}
				] ],
				page:true,
				done: function(res, curr, count){ //处理删除某一页最后一条数据的BUG
			        if(res.data.length==0&&curr!=1){
			        	tableIns.reload({
			        		page:{
			        			curr:(curr-1)
			        		}
			        	});
			        }
			    }
			});
		    //模糊查询
		    $("#doSearch").click(function(){
		    	var params = $("#searchForm").serialize();
		    	tableIns.reload({
		    		url:'/goods/loadAllGoods?'+params,
		    	})
		    });
		    
		    //监听表头点击事件
		    table.on('toolbar(goodsTable)',function(obj){
		    	switch(obj.event){
		    		case 'add':
		    			 openAddLayer();
		    			break;
		    		case 'batchdel':
		    			batchDelete(obj);
		    			break;
		    	}
		    });
		    
		    //文件上传
		    //上传头像
		    upload.render({
		    	elem:'.thumbImg',
		    	url:'/file/uploadFile',
		    	method:"post",  //此处是为了演示之用，实际使用中请将此删除，默认用post方式提交
		    	accept:'images',
		    	acceptMime:'image/*',
		    	field:'mf',//相当于表单的name属性值<file name="mf"
		    	done:function(res,index,upload){
		    		//选择完图片后台执行完  执行
		    		alert(res.data.src);
		    		$("#goodsimg").val(res.data.src);//要提交到数据库的
		    		$('.thumbImg').attr('src',"/file/showImage?filePath="+res.data.src);
		    	}
		    	
		    });
		    
		    
		    var mainIndex;
		    var url;
		    //打开添加的弹出层
		    function openAddLayer(){
		    	mainIndex=layer.open({
		    		type:1,
		    		title:'添加商品',
		    		skin: 'layui-layer-molv', //加上边框
					area: ['800px', '600px'], //宽高
					content:$("#saveOrUpdateDiv"),
					success:function(index){
						$("#dataForm")[0].reset();
						url="/goods/addGoods";
						//加载下拉列表
						$.get("/provider/loadAllAvailableProvider",function(data){
							var providerid=$("#providerid");
							var html='<option value="">请选择供应商</option>'
							$.each(data.data,function(i,item){
								html+='<option value="'+item.id+'">'+item.providername+'</option>';
							});
							providerid.html(html);
							form.render();
							//处理默认图片
							$("#goodsimg").val("/resources/images/defaultgoodsimg.png");//要提交到数据库的
							//显示默认图片  重新打开时
							$('.thumbImg').attr('src',"/file/showImage?filePath=/resources/images/defaultgoodsimg.png");
							
						});
					}

		    	});
		    }
		    
		    //批量删除
		    function batchDelete(obj){
		    	//获取要删除的行
		    	var checkStatus = table.checkStatus('goodsTable');
		   		if(checkStatus.data.length==0){
		   			layer.msg("请选择要删除的数据");
		   		}else{
		   			layer.confirm('真的删除选中的所有角色么?',function(index){
		   				layer.close(index);
		   				var params="";
		   				$.each(checkStatus.data,function(i,item){
		   					if(i==0){
		   						params+="ids="+item.id;
		   					}else{
		   						params+="&ids="+item.id;
		   					}
		   				});
		   				//向服务器发送删除指令
		   				$.post("/goods/batchDeleteGoods",params,function(obj){
		   					if(obj.code==200){
		   						tableIns.reload();//重载表格
		   					}
		   					layer.close(obj.msg);
		   				});
		   			});
		   		}
		    }
		    
		    //监听行点击事件
		    table.on('tool(goodsTable)',function(obj){
		    	var data = obj.data;//获取当前行数据
		    	var layEvent = obj.event;//获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
		    	if(layEvent === 'update'){//修改
		    		openUpdateGoodsLayer(data);
		    	}else if(layEvent === 'del'){//删除
		    		deleteDept(data);
		    	}
		    	
		    })
		    
		    //删除
		    function deleteDept(data){
    			layer.confirm('真的删除【'+data.goodsname+'】商品么',function(index){
	    			layer.close(index);
	    			//向服务器发送删除指令
	    			$.post("/goods/deleteGoods",{id:data.id},function(obj){
	    				if(obj.code == 200){
	    					tableIns.reload();//重新加载表单
	    				}
	    				layer.msg(obj.msg);
	    			});
	    		});
		    }
		    
		    //打开修改的弹出层
		    function openUpdateGoodsLayer(data){
		    	mainIndex=layer.open({
		    		type:1,
		    		title:'修改商品',
		    		skin: 'layui-layer-molv', //加上边框
					area: ['800px', '600px'], //宽高
					content:$("#saveOrUpdateDiv"),
					success:function(index){
						url="/goods/updateGoods";
						$("#dataForm")[0].reset();
						form.val("dataForm",data);
						
						//加载下拉列表
						$.get("/provider/loadAllAvailableProvider",function(res){
							var providerid=$("#providerid");
							var html='<option value="">请选择供应商</option>'
							$.each(res.data,function(i,item){
								if(item.id==data.providerid){
									html+='<option value="'+item.id+'" selected=selected>'+item.providername+'</option>'
								}else{
									html+='<option value="'+item.id+'">'+item.providername+'</option>'
								}
							});
							providerid.html(html);
							form.render();
							//显示默认图片  重新打开时
							$('.thumbImg').attr('src',"/file/showImage?filePath="+data.goodsimg);
							
						});
					}
		    	});
		    }
		    
		    //监听提交按钮的事件  
		    form.on("submit(doSubmit)",function(data){
		    	console.log(data.field);
		    	//提交 数据
		    	$.post(url,data.field,function(obj){
		    		if(obj.code==200){
		    			tableIns.reload();//重新加载表单
		    		}
		    		layer.msg(obj.msg);
					layer.close(mainIndex);
		    	})
		    	return false;//阻止同步提交
		    });
		    
		   
		    
	  });
	
	
	</script>
	
	
	
	
</body>
</html>